<template>
    <div>
      <BasicTable @register="registerTable" @resize-column="handleResizeColumn">
        <template #toolbar>
          <a-button
            type="primary"
            @click="handleCreate"
          >
            新增
          </a-button>
          <a-button
            type="error"
            :disabled="getSelectRows().length === 0"
            @click="handleDelete"
            :loading="delLoading"
          > 
            批量删除
          </a-button>
          <a-button
            type="success"
            :loading="syncLoading"
            @click="handleSync"
          >
            同步特来电
          </a-button>
        </template>
        <template #action="{ record }">
          <TableAction
            :actions="[
              {
                label: '激活',
                ifShow: record.type == 0,
                popConfirm: {
                  title: '确认要激活吗？',
                  confirm: handleActivate.bind(null, record.id),
                },
              },
              {
                label: '已激活',
                color: 'error',
                ifShow: record.type == 1
              },
              {
                label: '编辑',
                onClick: handleEdit.bind(null, record),
              },
              {
                label: '充电终端管理',
                onClick: handleYuTerminal.bind(null, record.id),
              },
            ]"
          />
        </template>
      </BasicTable>
      <EditModal @register="registerModal" @success="handleSuccess" />
      <!-- 充电终端管理弹窗 -->
      <YuTerminalModal @register="registerYuTerminalModal" />

    </div>
  </template>
  <script lang="ts">
  import { defineComponent } from 'vue';
import { defHttp } from '@/utils/http/axios';
  export default defineComponent({
    name: 'YuList',
  });
  </script>
  <script lang="ts" setup>
  import { onMounted, ref, h } from 'vue';
  import { BasicTable, useTable, TableAction } from '@/components/Table';
  import { useModal } from '@/components/Modal';
  import { Tag } from 'ant-design-vue';
  import EditModal from './yuComponents/yuEditModal.vue';
  import YuTerminalModal from './yuComponents/yuTerListModal.vue';
  import { useMessage } from '@/hooks/web/useMessage';
  const delLoading = ref(false);
  const syncLoading = ref(false);
  const { createMessage } = useMessage();
  const [registerModal, { openModal }] = useModal();
  const [registerYuTerminalModal, { openModal: openYuTerminal }] = useModal();
  const [registerTable, { reload, getSelectRows, getSelectRowKeys }] =
    useTable({
      api: '/admin/station/yu_list',
      columns: [
        {
            title: 'ID',
            dataIndex: 'id',
            width: 90,
            fixed: 'left',
        },
        {
            title: '充电站名称',
            dataIndex: 'name',
            width: 150,
        },
        {
            title: '城市名称',
            dataIndex: 'fullName',
            width: 150,
        },
        {
            title: '充电站编号',
            dataIndex: 'stationSn',
            width: 150,
        },
        {
            title: '类型',
            dataIndex: 'terminalTypeId',
            width: 150,
            customRender: ({ text }) => {
                if (text === 1) {
                    return h(Tag, { color: 'red' }, () => '快')
                }
                if (text === 2) {
                    return h(Tag, { color: 'green' }, () => '慢')
                }
                if (text === 3) {
                    return h('div', {  }, [
                        h(Tag, { color: 'red' }, () => '快'),
                        h(Tag, { color: 'green' }, () => '慢'),

                    ])
                }
            }
        },
        {
            title: '协议',
            dataIndex: 'protocolType',
            width: 150,   
            customRender: ({ text }) => {
                if (text === 0) {
                    return '万马'
                }
                if (text === 1) {
                    return '特来电'
                }
                if (text === 10) {
                    return '云快充'
                }
            }
        },
    ],
      useSearchForm: true,
      formConfig: {
        baseColProps: {
          span: 8,
        },
        schemas: [
          {
            component: 'Input',
            label: '充电站名称',
            field: 'name',
          },
          {
            component: 'Input',
            label: '电站编号',
            field: 'sn'
          }
        ]
      },
      showIndexColumn: true,
      indexColumnProps: {
        fixed: 'left',
      },
      pagination: true,
      bordered: true,
      actionColumn: {
        width: 150,
        title: '操作',
        dataIndex: 'action',
        slots: { customRender: 'action' },
        fixed: 'right',
      },
      rowKey: 'id',
      rowSelection: {
        type: 'checkbox',
      },
    });
  function handleCreate() {
    openModal(true, {
        isUpdate: false
    });
  }
  function handleEdit(record: Recordable) {
    openModal(true, {
        record,
        isUpdate: true,
    });
  }
  async function handleDelete() {
    delLoading.value = true;
    try {
        const res = await defHttp.post({ url: `/admin/station/yu_delete`, data: getSelectRowKeys() });
        createMessage.success(res);
        reload();
    } finally {
        delLoading.value = false;
    }
  }
  // async function handleDeleteSingle(record: Recordable) {
  //   const res = await defHttp.post({ url: `/admin/ad/deleteOne/${record.id}` });
  //   createMessage.success(res);
  //   reload();
  // }
  async function handleActivate(id: number) {
    const res = await defHttp.post({ url: `/admin/station/yu_activate/${id}` });
    createMessage.success(res);
    reload();
  }
  async function handleSync() {
    syncLoading.value = true;
    const res = await defHttp.get({ url: `/admin/station/syncStation` });
    createMessage.success(res);
    syncLoading.value = false;
  }
  async function handleYuTerminal(id: number) {
    openYuTerminal(true, {
        id,
    });
  }
  function handleSuccess() {
    reload();
  }
  </script>
  